<template>
    <h2 style="text-align: center;">逻辑网格</h2>
    <!-- 面包屑 -->
     <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格化管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>逻辑网格</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-layout">
        <el-container>
         <!-- 树状菜单 -->
        <el-aside width="200px" style="border: 1px solid #ccc; margin: 20px 3px; padding: 10px;width: 230px;">
            <el-input
                v-model="filterText"
                class="w-60 mb-2"
                placeholder="过滤关键字"
            />
            <el-tree
                ref="treeRef"
                style="max-width: 600px"
                class="filter-tree"
                :data="DepartInfo"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                @node-click="nodeClick"
            />
        </el-aside>
        <!-- 数据查询显示部分 -->
        <el-main>
            <!-- 表单查询部分 -->
            <div style="border: 1px solid #ccc; padding: 18px;margin: 2px 3px;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="网格名称">
                        <el-input v-model="formInline.LogicGrid_Name" placeholder="请输入网格名称" clearable />
                    </el-form-item>

                    <el-form-item label="上级网格名称">
                        <el-input v-model="formInline.LogicGrid_ParentName" placeholder="请输入上级网格名称" clearable />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="GetLogicGrid">查询</el-button>
                        <el-button type="danger" @click="Reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 数据显示部分 -->
            <div style="border: 1px solid #ccc; padding: 20px;margin: 20px 3px;">
                <el-button  type="success"  @click="AddLogicGrid">新增+</el-button>
                <el-table :data="Info" style="width: 100%">
                    <el-table-column fixed type="index" label="序号" width="90" />
                    <el-table-column prop="Id" label="网格编号" width="200" />
                    <el-table-column prop="LogicGrid_Name" label="网格名称" width="200" />
                    <el-table-column prop="LogicGrid_ParentName" label="上级网格名称" width="200" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="setup">
                        <el-button  type="danger" size="small" @click="DelLogicGrid(setup.row.Id)">删除</el-button>
                        <el-button  type="primary" size="small" @click="UpdateLogicGrid(setup.row)">编辑</el-button>
                    </template>
                    </el-table-column>
                </el-table>    
            </div>

            <!-- 添加弹出窗 -->
            <el-dialog
                v-model="AdddialogVisible"
                title="添加逻辑网格"
                width="700"
                center
                align-center 
            >
                <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    :model="AddInfo"
                    :rules="rules"
                    label-width="auto"
                    class="demo-ruleForm"
                    :size="formSize"
                    status-icon
                >
                    <el-form-item label="所属部门" prop="Depart_Id">
                        <el-cascader v-model="AddInfo.Depart_Id" :options="DepartInfo1" :props="props1" @change="DepartChange" clearable />
                    </el-form-item>

                    <el-form-item label="上级网格编码" prop="LogicGrid_ParentGridCode">
                        <el-input v-model="AddInfo.LogicGrid_ParentGridCode" />
                    </el-form-item>

                    <el-form-item label="网格编码" prop="LogicGrid_Code">
                        <el-input v-model="AddInfo.LogicGrid_Code" />
                    </el-form-item>

                    <el-form-item label="网格名称" prop="LogicGrid_Name">
                        <el-input v-model="AddInfo.LogicGrid_Name" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>


              <!-- 修改弹出窗 -->
              <el-dialog
                v-model="UpdatedialogVisible"
                title="修改逻辑网格"
                width="700"
                center
                align-center 
            >
                <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    :model="AddInfo"
                    :rules="rules"
                    label-width="auto"
                    class="demo-ruleForm"
                    :size="formSize"
                    status-icon
                >
                    <el-form-item label="所属部门" prop="Depart_Id">
                        <el-cascader v-model="AddInfo.Depart_Id" :options="DepartInfo1" :props="props1" @change="DepartChange" clearable />
                    </el-form-item>

                    <el-form-item label="上级网格编码" prop="LogicGrid_ParentGridCode">
                        <el-input v-model="AddInfo.LogicGrid_ParentGridCode" />
                    </el-form-item>

                    <el-form-item label="网格编码" prop="LogicGrid_Code">
                        <el-input v-model="AddInfo.LogicGrid_Code" />
                    </el-form-item>

                    <el-form-item label="网格名称" prop="LogicGrid_Name">
                        <el-input v-model="AddInfo.LogicGrid_Name" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="UpdatesubmitForm(ruleFormRef)">修改</el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-main>
        </el-container>
   </div>

</template>


<script lang="ts" setup>
    import { reactive } from 'vue'
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { ElMessage, ElMessageBox } from 'element-plus'
    import {  watch } from 'vue'
    import type { TreeInstance } from 'element-plus'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'


    //显示响应式数据
    const Info=ref([]);
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:3,
        zongtiao:0,
        zongpage:0,
    })
    //钩子函数
    onMounted(()=>{
        GetLogicGrid();
        GetDepartmentTree();//加载部门信息
    })
    //查询条件
    const formInline = reactive({
        LogicGrid_Name: '',
        LogicGrid_ParentName: '',
    })
    //显示
    const GetLogicGrid = () => {
        axios.get("http://localhost:5247/api/LogicGrid/GetLogicGrid",
            {
                params:{
                    LogicGrid_Name:formInline.LogicGrid_Name,
                    LogicGrid_ParentName:formInline.LogicGrid_ParentName,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Plsit;
            PageInfo.value.zongpage=res.data.ZongPage;
            PageInfo.value.zongtiao=res.data.ZongTiao
        })
    }
    //重置
    const Reset=()=>{
        formInline.LogicGrid_Name="";
        formInline.LogicGrid_ParentName="";
    }
    //逻辑删除
    const DelLogicGrid = (Id:string) => {
        ElMessageBox.confirm(
            '确定删除?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
    )
        .then(() => {
            axios.put("http://localhost:5180/api/LogicGrid/DelLogicGrid",
                {
                    Id:Id
                }
            )
            .then(res=>{
                if(res.data.Code==200)
                {
                    ElMessage.success(res.data.Message);
                    GetLogicGrid();
                }
                else
                {
                    ElMessage.error(res.data.Message);
                }
            })
        })
    }

    //-----------------------------------------------------树形级联----------------------------------------------------//
    interface Tree {
        [key: string]: any
    }

    const filterText = ref('')
    const treeRef = ref<TreeInstance>()

    //树形获取值
    const defaultProps = {
        children: 'Children',
        label: 'Depart_Name',
    }

    watch(filterText, (val) => {
        treeRef.value!.filter(val)
    })

    const filterNode = (value: string, data: Tree) => {
        if (!value) return true
        return data.Depart_Name.includes(value)
    }

    //加载部门信息
    const DepartInfo =ref([])
    const DepartInfo1 =ref([])
    const GetDepartmentTree=()=>{
        axios.get("http://localhost:5192/api/Department/GetDepartmentTree")
        .then(res=>{
            DepartInfo.value=res.data.Data;
            DepartInfo1.value=res.data.Data;
        })
    }

    //级联
    const props1 = {
        checkStrictly: true,
        value:"Id",
        label:"Depart_Name",
        children:"Children"
    }
    //获取值
    const DepartChange=(value:any)=>{
        AddInfo.value.Depart_Id=value[value.length-1];
    }
    const nodeClick=(DepartInfo:any)=>{
        ElMessage.success("您选择的节点是："+DepartInfo.Depart_Name);
    }

    //-----------------------------------------------------添加弹出窗----------------------------------------------------//
    const AdddialogVisible=ref(false);
    //添加点击按钮
    const AddLogicGrid=()=>{
        AdddialogVisible.value=true;

        //清除数据
        AddInfo.value.Depart_Id=0;
        AddInfo.value.LogicGrid_Code="";
        AddInfo.value.LogicGrid_Name="";
        AddInfo.value.LogicGrid_ParentGridCode="";
    }

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //添加响应式数据
    const AddInfo = ref({
        Id:"",
        LogicGrid_Code: "",
        LogicGrid_ParentGridCode: "",
        LogicGrid_Name: "",
        Depart_Id: 0
    })

    const locationOptions = ['Home', 'Company', 'School']

    //验证
    const rules = reactive<FormRules>({
        LogicGrid_Name: [
            { required: true, message: '请输入网格名称', trigger: 'blur' },
        ],
        LogicGrid_ParentGridCode: [
            { required: true, message: '请输入上级网格编码', trigger: 'blur' },
        ],
        LogicGrid_Code: [
            { required: true, message: '请输入网格编码', trigger: 'blur' },
        ],
    })  
    //添加按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.post("http://localhost:5180/api/LogicGrid/AddLogicGrid",AddInfo.value)
                .then(res=>{
                    if(res.data.Code==200)
                    {
                        ElMessage.success(res.data.Message);

                        //关闭弹窗
                        AdddialogVisible.value=false;
                        GetLogicGrid();//跳转到显示页面
                    }
                    else
                    {
                        ElMessage.error(res.data.Message)
                    }
                })
            } else {
                console.log('error submit!', fields)
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    //-----------------------------------------------------修改弹出窗----------------------------------------------------//
    

    const UpdatedialogVisible=ref(false);
    //修改点击按钮
    const UpdateLogicGrid=(row:any)=>{
        UpdatedialogVisible.value=true;

        //反填数据
        AddInfo.value.Id=row.Id;
        AddInfo.value.Depart_Id=row.Depart_Id;
        AddInfo.value.LogicGrid_Code=row.LogicGrid_Code;
        AddInfo.value.LogicGrid_Name=row.LogicGrid_Name;
        AddInfo.value.LogicGrid_ParentGridCode=row.LogicGrid_ParentGridCode;
    }
    //修改按钮
    const UpdatesubmitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.put("http://localhost:5180/api/LogicGrid/UpdateLogicGrid",AddInfo.value)
                .then(res=>{
                    if(res.data.Code==200)
                    {
                        ElMessage.success(res.data.Message);

                        //关闭弹窗
                        UpdatedialogVisible.value=false;
                        GetLogicGrid();//跳转到显示页面
                    }
                    else
                    {
                        ElMessage.error(res.data.Message)
                    }
                })
            } 
        })
    }

</script>

<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
</style>